<%layout("/xfast/layout/default.html",{'title' : object.name + I18N('列表')}){%>
<div class="layui-card">
  <div class="layui-card-header">${object.name}</div>
  <div class="layui-card-body">
    <#xquery id="queryForm" objectCode="${object.code}" />
    <table id="demo" lay-filter="test"></table>
  </div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">新增</button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="deletes">删除选中</button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
  layui.use(['form','table'], function(){
    var form = layui.form;
    var table = layui.table;

    var options = {
      elem: '#demo'
      ,height: 'full'
      ,url: '/grid/query/${object.code}-${menu.code}' //数据接口
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,page: true //开启分页，
      ,request: {
          pageName: 'page' //页码的参数名称，默认：page
          ,limitName: 'rows' //每页数据量的参数名，默认：limit
      },cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
          <%
          for(field in object.fields){
          %>
          ,{field: '${field.en}', title: '${field.cn}', width: 180, sort: true}
          <%
          }
          %>
        ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}

      ]],parseData: function(res){ //res 即为原始返回的数据
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows //解析数据列表
      };
    }
    };
    //第一个实例
    var tableIns  = table.render(options);
    window.tableIns = tableIns;
      //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          layer.msg("add");
          var index = layer.open({
            type: 2,
            title: '新增 ${object.name}',
            content: '/form/add/${object.code}',
            area: ['800px', '600px'],
            maxmin: true,
          });
          //弹出即全屏
          //layer.full(index);
        break;
        case 'deletes':
          layer.msg("deletes");
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          layer.confirm('真的删除这'+data.length+'行么', function(index){
          $.post('/grid/delete/${object.code}', {
                  rows : JSON.stringify(data)
              }, function(result, status) {
                  if (result.success) {
                      layer.msg('删除成功');
                      layer.close(index);
                      window.location.reload();
                  } else {
                      layer.msg(result.msg);
                      layer.close(index);
                  }
              });
            });
        break;
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
        break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
        break;
        // TODO 此处使用模板循环 "toolbar event" : "toolbar event handler"
        // 自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
        break;
      };
    });

      //监听行工具条
    table.on('tool(test)', function(obj){
      console.log(obj)
      layer.msg(JSON.stringify(obj.data));
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.pk_val + ' 的查看操作');
          var index = layer.open({
            type: 2,
            title: '查看 ${object.name}',
            content: '/form/detail/${object.code}-'+data.pk_val,
            area: ['600px', '400px'],
            maxmin: true,
          });

      } else if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          $.post('/grid/delete/${object.code}', {
              rows : JSON.stringify([obj.data])
          }, function(result, status) {
              if (result.success) {
                  layer.msg('删除成功');
                  obj.del();
                  layer.close(index);
                  window.location.reload();
              } else {
                  layer.msg(result.msg);
                  layer.close(index);
              }
          });
        });
      } else if(obj.event === 'edit'){
        layer.alert('编辑行：<br>'+ JSON.stringify(data))
          var index = layer.open({
            type: 2,
            title: '查看 ${object.name}',
            content: '/form/update/${object.code}-'+data.pk_val,
            area: ['600px', '400px'],
            maxmin: true,
          });
      } else {
        layer.msg(obj.event);
      }
    });

    //监听提交 TODO 定名称提方法，html+js+css
    form.on('submit(queryFormSubmit)', function(data){
      layer.msg(JSON.stringify(data.field));
      $.extend( options , {"where": data.field} )
      tableIns  = table.render(options);
      return false;
    });

  });
</script>
<%if(!isEmpty(menu.diy_js!)){%>
<script type="text/javascript" src="${menu.diy_js}"></script>
<%}%> <%if(!isEmpty(object.diy_js!)){%>
<script type="text/javascript" src="${object.diy_js}"></script>
<%}%> <%}%>
